<template>
  <VGroup class="h-[32px]">
    <!-- 平台 -->
    <el-select v-model="platformCurrent" placeholder="平台" style="width: 180px" :disabled="disabled" collapse-tags @change="handleChange('platform', $event)" clearable>
      <el-option v-for="item in optionsData.platform" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <!-- 站点 -->
    <el-select v-model="siteCurrent" placeholder="站点" :disabled="!platformCurrent" @change="handleChange('site', $event)" clearable collapse-tags filterable class="aaaaa">
      <el-option v-for="item in optionsData.sites" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <!-- 店铺 -->
    <el-select v-model="shopCurrent" placeholder="店铺" :disabled="!platformCurrent" @change="handleChange('shop', $event)" clearable collapse-tags filterable class="aaaaa w-300">
      <el-option v-for="item in optionsData.shop" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </VGroup>
</template>
<script setup>
import { nextTick, ref, unref } from "vue"
import { apiGetPlatform, getShop } from "@/api/public"
const props = defineProps({
  value: { type: Object, default: () => ({}) },
  disabled: { type: Boolean, default: false },
  platform: { type: [Number, String], default: () => "" }, // 平台
  site: { type: [Number, String], default: () => "" }, // 站点
  shop: { type: [Number, String], default: () => "" }, // 店铺
})

// const emit = defineEmits(['input'])
const emit = defineEmits(["update:platform", "update:site", "update:shop", "update:platform_name", "update:site_name", "update:shop_name"])

const platformCurrent = computed({
  get: () => {
    return props.platform
  },
  set: (value) => {
    emit("update:platform", value)
  },
})

const siteCurrent = computed({
  get: () => {
    return props.site
  },
  set: (value) => {
    emit("update:site", value)
  },
})
const shopCurrent = computed({
  get: () => {
    return props.shop
  },
  set: (value) => {
    emit("update:shop", value)
  },
})

const optionsData = reactive({
  platform: [],
  sites: [],
  shop: [],
})

const options = {
  filterable: true,
  collapseTags: true,
  collapseTagsTooltip: true,
  clearable: true,
  maxCollapseTags: 1,
}

onMounted(() => {
  handleGetPlatforms()
})

const handleGetPlatforms = async () => {
  try {
    const { data } = await apiGetPlatform({ platform_name: " " })
    // 初始化平台枚举
    optionsData.platform = data.map((n) => ({
      label: n.platform_name,
      value: n.platform_id,
      code: n.platform_name,
      // 初始化站点枚举
      sites: n.sites.map((v) => ({ label: v.site_abbrev, value: String(v.site_id), code: v.site_code })),
    }))
  } catch (e) {}
}
// 回显获取 option
const echoOption = () => {
  console.log("-------- echoOption ---------")
  let { platform, site, shop } = props
  // 存在平台
  if (platform) {
    let sitesOpt = optionsData?.platform?.find((v) => v.value == platform)?.sites
    optionsData.sites = sitesOpt
  }
  if (platform && site) {
    getShopOpt()
  }
}

// 根据 平台& 站点 获取店铺
const getShopOpt = async () => {
  try {
    let params = {
      platform_ids: platformCurrent.value ? [platformCurrent.value] : [],
      site_ids: siteCurrent.value?.length ? [siteCurrent.value] : [],
    }
    const { data } = (await getShop(params)) || {}
    const shopOpt = data?.map((n) => ({ label: n.shop_name, value: n.shop_id, site_id: n.site_id }))
    optionsData.shop = shopOpt
  } catch (e) {
    optionsData.shop = []
    shopCurrent.value = ""
  }
}
const getSites = (e) => {
  if (e) {
    let platform = optionsData.platform.find((v) => v.value === e)
    optionsData.sites = platform?.sites
  } else {
    optionsData.sites = []
  }
}

watch(
  () => props.platform,
  (val) => {
    if (val) {
      getSites(val)
      getShopOpt()
    }
  },
  { immediate: true }
)

const handleChange = (type, e) => {
  console.log("------++++++++++--------- handleChange -------++++++++++++-------")

  // 平台
  if (type === "platform") {
    let sitesOpt = []

    let platform = optionsData.platform.find((v) => v.value === e)
    sitesOpt = platform?.sites
    emit("update:platform_name", platform?.code || "")

    emit("update:site_name", "")
    emit("update:shop_name", "")

    optionsData.sites = sitesOpt
    siteCurrent.value = ""
    shopCurrent.value = ""
    nextTick(() => getShopOpt())
  }
  // 站点
  if (type === "site") {
    shopCurrent.value = ""

    let site_name = optionsData.sites.find((v) => v.value === e)?.code || ""
    emit("update:site_name", site_name)
    emit("update:shop_name", "")

    nextTick(() => getShopOpt())
  }
  // //  店铺
  // if (type === "shop") {
  //   let shopItem = optionsData.shop.find((v) => v.value === e)
  //   emit("update:shop_name", shopItem?.label)
  //   shopItem && (siteCurrent.value = String(shopItem.site_id))
  // }
  //  店铺
  if (type === "shop") {
    let shopItem = optionsData.shop.find((v) => v.value === e)
    emit("update:shop_name", shopItem?.label)
    siteCurrent.value = ""
    emit("update:site_name", "")
    let siteItem = optionsData.sites.find((v) => v.value == shopItem.site_id)
    if (siteItem) {
      siteCurrent.value = String(shopItem.site_id)
      emit("update:site_name", siteItem.code)
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.aaaaa) {
  width: 200px;
  &.w-300 {
    width: 300px;
  }
  .el-input__suffix-inner {
    width: 14px;
    justify-content: flex-end;
  }
  .el-tag__content {
    span {
      font-size: 12px !important;
    }
  }
  .el-select-tags-wrapper.has-prefix {
    max-width: 120px;
    display: flex;
    .el-tag__content {
      .el-select__tags-text {
        max-width: 60px !important;
      }
    }
    .el-tag.is-closable {
      margin-right: 4px !important;
    }
    .el-tag--info {
      margin-left: 0 4px;
      padding: 0 4px;
    }
  }
  .el-select__input {
    max-width: 30px !important;
    min-width: 28px;
    margin-left: 4px;
  }
}
</style>
